import React, { memo, useRef } from 'react'
import type { ReactNode } from 'react'
import { NavLink, Link } from 'react-router-dom'
// import { HeaderNav } from './style'
import { headerLinks } from '@/common/local-data'
import { HeaderLeft, HeaderRight, HeaderWrapper } from './style'
import { Dropdown, Input, Menu } from 'antd'
import { DownOutlined, SearchOutlined } from '@ant-design/icons'
interface IProps {
  children?: ReactNode,
}
const showSelectItem = (item, index) => {
  if (item.type === 'path') {
    return (
      <div key={item.title} className="header-item">
        <NavLink to={item.link}>{item.title}</NavLink>
      </div>
    )
  } else {
    return (
      <div key={item.title} className="header-item">
        <a href={item.link}>{item.title}</a>
      </div>
    )
  }
}

// 用户下拉JSX
// const profileDwonMenu = () => {
//   return isLogin ? (
//     <Menu>
//       <Menu.Item>
//         <a
//           target="_blank"
//           rel="noopener noreferrer"
//           href="#/"
//           onClick={(e) => e.preventDefault()}
//         >
//           {profile.nickname}
//         </a>
//       </Menu.Item>
//       <Menu.Item>
//         <a rel="noopener noreferrer" href="#/user">
//           我的主页
//         </a>
//       </Menu.Item>
//       {/* <Menu.Item>
//             <a
//               target="_blank"
//               rel="noopener noreferrer"
//               href="#/"
//             >
//               没想好
//             </a>
//           </Menu.Item> */}
//       <Menu.Item danger onClick={() => clearLoginState()}>
//         退出登录
//       </Menu.Item>
//     </Menu>
//   ) : (
//     ''
//   )
// }
// const showProfileContent = () => {
//   return (
//     <img src={profile.avatarUrl} alt="" className="profile-img" />
//     // <div>
//     //   <img src={profile.avatarUrl} alt="" className="profile-img" />
//     //   {/* <span>{profile.nickname}</span> */}
//     // </div>
//   )
// }
const changeIsVisible = (type: Boolean) => { }



const AppHeader: React.FC<IProps> = memo(() => {
  return (
    <HeaderWrapper>
      <div className="content w1100">
        <HeaderLeft>
          <h1 className='logo  sprite_01'>
            <a href="#/">
              网易云音乐
            </a>
          </h1>
          <div className="header-group">
            {headerLinks.map((item, index) => {
              return showSelectItem(item, index)
            })}
          </div>
        </HeaderLeft>
        <HeaderRight>
          <div className="search-wrapper">
            <Input
              className="search"
              placeholder="音乐/视频/电台/用户"
              prefix={<SearchOutlined />}
            />
            <div className="down-slider" style={{ display: 'none' }}>
              <div className="search-header">
                <span className="discover">搜"歌曲"相关用户&gt;</span>
              </div>

              <div className="content">
                <div className="zuo">
                  <span className="song">单曲</span>
                </div>
                <span className="main">
                </span>
              </div>
            </div>
          </div>

          <div className="center">创作者中心</div>
          <div className="login">登录</div>
        </HeaderRight>
      </div>
      <div className="divider"></div>
    </HeaderWrapper >
  )
})
export default AppHeader